<!--预约审批页-->
<template>
  <!-- 顶部条 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">审批列表</span>
  </div>
  <!-- 审批搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="预约人">
        <el-input placeholder="请输入预约人" style="width:220px;"
                  @keydown.enter.prevent="loadTableDate" v-model="search.username"></el-input>
        <!-- 因为当前表单只有一个表单项,当敲回车提交此项值时,默认认为提交整个表单,这会触发整个页面整体刷新
             为了阻止页面整体刷新,这里使用prevent阻止默认行为,只让回车提交表单中当前项的值就可以了 -->
      </el-form-item>
      <el-form-item label="分店选择" style="width:250px;">
        <el-select placeholder="请选择所属分店" v-model="search.branchId" :disabled="true">
          <el-option v-for="item in branchOptions"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadTableDate">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 审批单主体 -->
  <el-card style="margin:20px;">
    <!--  审批状态项  -->
    <el-radio-group style="margin-bottom: 15px;" v-model="type" @change="loadTableDate">
      <el-radio-button value="10" size="large">待审核</el-radio-button>
      <el-radio-button value="40" size="large">驳回</el-radio-button>
      <el-radio-button value="50" size="large">已审核</el-radio-button>
    </el-radio-group>
    <!--  审批列表  -->
    <el-table :data="tableData">
      <el-table-column label="编号" prop="id" align="center" width="55" type="index"></el-table-column>
      <el-table-column label="预约人" prop="username" align="center" width="110"></el-table-column>
      <el-table-column label="预留姓名" prop="reserveName"  align="center"></el-table-column>
      <el-table-column label="预留电话" prop="phone"  align="center"></el-table-column>
      <el-table-column label="预约时间" prop="reservationTime"  align="center"></el-table-column>
      <el-table-column label="预约状态" prop="status"  align="center" :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="预约餐厅" prop="branchId"  align="center" :formatter="formatRoleTable"></el-table-column>
      <el-table-column label="预约餐桌" prop="tableId"  align="center" :formatter="formatTableTable"></el-table-column>
      <el-table-column label="处理人" prop="handleName"  align="center" v-if="type==40||type==50"></el-table-column>
      <el-table-column label="操作" width="100" align="center" v-if="type==10||type==40" :key="audit">
        <template #default="scope">
          <!-- 审批10：在待我审核页签下显示，需要当前登录用户进行审批 -->
          <el-button type="primary" link v-if="type==10" @click="auditing(scope.row.id)">审批</el-button>
          <!-- 查看40：在驳回页签下显示，可以查看已驳回申请的驳回原因 -->
          <el-button type="primary" link v-if="type==40" @click="auditing(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 审批/查看弹窗 -->
  <el-dialog :title="dialogTitle" v-model="auditDialogVisible">
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="预留姓名">{{ auditDialogData.reserveName }}</el-descriptions-item>
      <el-descriptions-item label="预留电话">{{ auditDialogData.phone }}</el-descriptions-item>
      <el-descriptions-item label="预约时间">{{ auditDialogData.reservationTime }}</el-descriptions-item>
      <el-descriptions-item label="就餐人数">{{ auditDialogData.number+" 人" }}</el-descriptions-item>
      <el-descriptions-item label="预约餐厅">
        <el-input  :disabled="true" v-model="auditDialogData.branchId" :formatter="formatBranchId" style="border: none; background: transparent; padding: 0;"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="预约餐桌">
        <el-input  :disabled="true" v-model="auditDialogData.tableId" :formatter="formatTableId" style="border: none; background: transparent; padding: 0;"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="预约人">{{ auditDialogData.username }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ auditDialogData.remark }}</el-descriptions-item>
      <!--  驳回原因要在点击驳回才显示 -->
      <el-descriptions-item label="审核人"
                            v-if="auditDialogData.status==40">{{auditDialogData.handleName}}</el-descriptions-item>
      <el-descriptions-item label="驳回原因"
                            v-if="auditDialogData.status==40">{{auditDialogData.rejectReason}}</el-descriptions-item>
    </el-descriptions>
    <!--  下方的操作按钮只有审核状态为"待审核10"时才显示  -->
    <template #footer v-if="auditDialogData.status==10">
      <el-form>
        <el-form-item label="审核人" style="width: 200px; padding-right: 20px">
          <el-input :disabled="true" :value="user.username"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="auditDialogVisible=false">取消</el-button>
      <el-button type="primary" plain @click="rejectInnerDialogVisible=true">驳回</el-button>
      <el-button type="primary" @click="auditPass">通过</el-button>
    </template>
  </el-dialog>

  <!-- 驳回原因弹窗 -->
  <el-dialog title="驳回 查看" v-model="rejectInnerDialogVisible" style="margin-top: 37vh;" :before-close="rejectConfirm">
    <el-descriptions direction="horizontal" border>
      <el-descriptions-item label="驳回原因">
        <el-input placeholder="请输入驳回原因" v-model="rejectReason"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" plain @click="rejectConfirm">取消</el-button>
      <el-button type="primary" @click="auditReject">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//控制审批弹窗标题
const dialogTitle = ref("待审批详情");
//控制审批弹窗是否显示
const auditDialogVisible = ref(false);
//控制驳回原因弹窗是否显示
const rejectInnerDialogVisible = ref(false);

//获取当前登录的用户(审批人)的数据
const user = ref(getUser());

//定义数组用来保存审批列表表格的数据
const tableData = ref([]);
//定义对象用来保存查询条件
const search = ref({
  username:'', //搜索卡片中的预约人姓名
  branchId:user.value.branchId,// 选择分店
  status:''//提前准备,应批状态下的审批数据
});

// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};

// 定义格式化预约状态
const appStatusFormatter = (row, column, cellValue, index) => {
  if(cellValue == 10){
    cellValue = '已发起';
  }else if(cellValue == 20){
    cellValue = '已撤销';
  }else if(cellValue == 30){
    cellValue = '确认中';
  }else if(cellValue == 40){
    cellValue = '驳回';
  }else if(cellValue == 50){
    cellValue = '已审核';
  }else if(cellValue == 60){
    cellValue = '商家确认到店';
  }else if(cellValue == 70){
    cellValue = '预约完成';
  }
  return cellValue;
}
// 在弹窗中显示分店名称
const formatBranchId=(value)=>{
  if (!branchOptions.value){
    return value;
  }
  for (let item of branchOptions.value){
    if (item.id==value){
      value = item.name;
    }
  }
  return value;
}
// 在弹窗中显示餐桌名称
const formatTableId=(value)=>{
  if (!tableOptions.value){
    return value;
  }
  for (let item of tableOptions.value){
    if (item.id==value){
      value = item.name;
    }
  }
  return value;
}
// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}


//定义变量用来保存上方审批状态单选组的值,方便后续做双向绑定
const type = ref("10");
//定义加载审批数据的方法
const loadTableDate = () => {
  //search.value.auditUserId = user.value.id;
  search.value.status = type.value;
  // 发送ajax请求
  let data = qs.stringify(search.value);
  axios.get(BASE_URL + '/v1/reservation/select?'+data).then((response) => {
    if (response.data.code == 2000) {
      tableData.value = response.data.data;
      //console.log(tableData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义重置搜索的方法
const resetSearch = ()=>{
  search.value.username = '';
  loadTableDate();//重新加载所有的审批单数据
}
//一进到页面就立即执行加载审批数据的方法
onMounted(()=>{
  loadTableDate();
  getBranchs(branchOptions);
  getTables(tableOptions);
})
//定义对象用来保存审批弹窗的reservation详情数据
const auditDialogData = ref({
  username:'',//预约人
  reserveName:'',//预留姓名
  status:'',//预约状态
  phone:'',//预留电话
  number:'',//人数
  branchId:'',//分店
  tableId:'',//餐桌
  reservationTime:'',//时间
  handleId: '',//审批人id
  handleName:'',//审批人
  remark:''//备注
});
//点击审批按钮,根据传过来的审批id,查询此审批单对应的申请详情
const auditing = (id)=>{
  //显示 审批+驳回 弹窗
  auditDialogVisible.value = true;
  axios.get(BASE_URL+'/v1/reservation/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      auditDialogData.value = response.data.data[0];
      //根据请求回来数据中的审批状态,显示审批弹窗的标题
      if(auditDialogData.value.status == 10){
        dialogTitle.value = '待审批详情';
      }else{
        dialogTitle.value = '驳回详情';
      }
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义处理审批通过的方法
const auditPass = ()=>{
  //将当前审批单的状态设置为"已审核"
  auditDialogData.value.status = 50;
  auditDialogData.value.handleId = user.value.id;
  let data = qs.stringify(auditDialogData.value);
  axios.post(BASE_URL+'/v1/reservation/save',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('审批通过!');
      auditDialogVisible.value = false;//关闭弹窗
      auditDialogData.value = {};//清空刚刚审批的表单数据
      loadTableDate();//重新加载审批列表数据
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义变量用来保存驳回原因
const rejectReason = ref('');
//定义方法用来处理驳回操作
const auditReject = ()=>{
  //先对驳回原因进行非空校验,这是必填项
  if(!rejectReason.value || rejectReason.value.trim()==''){
    ElMessage.error('驳回原因不能为空!');
    return;
  }
  //将当前审批单的状态设置为"驳回"且设置驳回原因
  auditDialogData.value.status = 40;
  auditDialogData.value.handleId = user.value.id;
  auditDialogData.value.rejectReason = rejectReason.value;
  let data = qs.stringify(auditDialogData.value);
  axios.post(BASE_URL+'/v1/reservation/save',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('驳回成功!');
      rejectInnerDialogVisible.value = false;//关闭内容弹窗
      auditDialogVisible.value = false;//关闭外层弹窗
      auditDialogData.value = {};//清空刚刚审批的表单数据
      loadTableDate();//重新加载审批列表数据
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义处理内层弹窗(驳回原因)关闭的方法
const rejectConfirm = ()=>{
  if(confirm('确认要关闭驳回原因弹窗吗?')){
    rejectReason.value = '';
    rejectInnerDialogVisible.value = false;
  }
}


</script>

<style>

</style>